<template>
	<div class="margin-top-lg">
		<!-- 炉次计划信息 -->
		<div class="flex-between padding-right">
			<div class="flex">
				<div class="luci-box cursor" :class="item.type === luciType ? 'btn-bg-blue text-white' : 'bg-white'" v-for="(item, index) in lucTypeList" :key="index" @click="luciClick(item)">
					{{item.name}}
				</div>
			</div>

			<el-button icon="Plus" type="primary" class="btn-bg-blue btn-box" size="large" v-if="luciType === 'ejection' && type !== 'page'" @click="dialogOpen(true)">添加</el-button>
		</div>

		<div class="margin-top-lg text-white search-dark">
			<lay-json-schema-form :model="formData" :schema="schema" size="sm" v-show="luciType === 'plan'"></lay-json-schema-form>
			<!-- 炉次出坯信息表格 -->
			<div v-show="luciType === 'ejection'">
				<pol-table ref="polTableRef" v-bind="tableOpt" height="260px" :cellClassName="tableClass">
					<template #caozhuo="{ row, index }">
						<div class="flex align-center justify-center text-green2">
							<span class="cursor">编辑</span>
							<span class="margin-left-lg cursor">删除</span>
						</div>
					</template>
				</pol-table>
			</div>
		</div>


		<el-dialog v-model="dialogHeatScheduleEdit" title="确认提示" width="1100" center align-center>
			<heatScheduleEdit @closePopup="dialogOpen(false)"></heatScheduleEdit>
		</el-dialog>

	</div>
</template>

<script setup>
	import heatScheduleEdit from './heatScheduleEdit.vue' //新增编辑

	import { ref } from 'vue';

	const props = defineProps({
		//默认表格高度
		tableClass: {
			type: String,
			default: '',
		},
		
		type: {
			type: String,
			default: 'page'
		}
	})
	//表单数据
	const formData = ref({
		CardTypeCode: '123', //
		CardTypeName: '', //
	});
	
	const isDisabled = ref(props.type == 'page')
	//表单配置
	const schema = ref({
		CardTypeCode: {
			label: '制作命令号',
			type: 'input',
			props: {
				disabled: isDisabled,
				type: 'text',
				placeholder: '请输入制作命令号',
			},
			colProps: {
				md: 4,
			},
		},
		CardTypeName: {
			label: '计划号',
			type: 'input',
			props: {
				disabled: isDisabled,
				type: 'text',
				placeholder: '请输入计划号',
			},
			colProps: {
				md: 5,
			},
		},
		CardTypeName3: {
			label: '熔炼号',
			type: 'input',
			props: {
				disabled: isDisabled,
				type: 'text',
				placeholder: '请输入熔炼号',
			},
			colProps: {
				md: 5,
			},
		},
		CardTypeName4: {
			label: '计划钢种',
			type: 'input',
			props: {
				disabled: isDisabled,
				type: 'text',
				placeholder: '请输入计划钢种',
			},
			colProps: {
				md: 5,
			},
		},
		CardTypeName5: {
			label: '状态',
			type: 'input',
			props: {
				disabled: isDisabled,
				type: 'text',
				placeholder: '请输入状态',
			},
			colProps: {
				md: 5,
			},
		},

		adTypeCode: {
			label: '冶金路径',
			type: 'input',
			props: {
				disabled: isDisabled,
				type: 'text',
				placeholder: '请输入冶金路径',
			},
			colProps: {
				md: 4,
			},
		},
		adTypeName: {
			label: '浇次ID号',
			type: 'input',
			props: {
				disabled: isDisabled,
				type: 'text',
				placeholder: '请输入浇次ID号',
			},
			colProps: {
				md: 5,
			},
		},
		adTypeName3: {
			label: '炉次数量',
			type: 'input',
			props: {
				disabled: isDisabled,
				type: 'text',
				placeholder: '请输入炉次数量',
			},
			colProps: {
				md: 5,
			},
		},
		adTypeName4: {
			label: '浇次内序号',
			type: 'input',
			props: {
				disabled: isDisabled,
				type: 'text',
				placeholder: '请输入浇次内序号',
			},
			colProps: {
				md: 5,
			},
		},
		adTypeName5: {
			label: '到台重量',
			type: 'input',
			props: {
				disabled: isDisabled,
				type: 'text',
				placeholder: '请输入到台重量',
			},
			colProps: {
				md: 5,
			},
		},

		bdTypeCode: {
			label: '上台重量',
			type: 'input',
			props: {
				disabled: isDisabled,
				type: 'text',
				placeholder: '请输入上台重量',
			},
			colProps: {
				md: 4,
			},
		},
		bdTypeName: {
			label: '出坯数量',
			type: 'input',
			props: {
				disabled: isDisabled,
				type: 'text',
				placeholder: '请输入出坯数量',
			},
			colProps: {
				md: 5,
			},
		},
		bdTypeName3: {
			label: '计划号',
			type: 'input',
			props: {
				disabled: isDisabled,
				type: 'text',
				placeholder: '请输入计划号',
			},
			colProps: {
				md: 5,
			},
		},
		bdTypeName4: {
			label: '铸坯数量',
			type: 'input',
			props: {
				disabled: isDisabled,
				type: 'text',
				placeholder: '请输入铸坯数量',
			},
			colProps: {
				md: 5,
			},
		},
		bdTypeName5: {
			label: '罐ID号',
			type: 'input',
			props: {
				disabled: isDisabled,
				type: 'text',
				placeholder: '请输入罐ID号',
			},
			colProps: {
				md: 5,
			},
		},

		cTypeCode: {
			label: '罐重量',
			type: 'input',
			props: {
				disabled: isDisabled,
				type: 'text',
				placeholder: '请输入罐重量',
			},
			colProps: {
				md: 4,
			},
		},
		cTypeName: {
			label: '到台时刻',
			type: 'input',
			props: {
				disabled: isDisabled,
				type: 'text',
				placeholder: '请输入到台时刻',
			},
			colProps: {
				md: 5,
			},
		},
		cTypeName3: {
			label: '上台时间',
			type: 'input',
			props: {
				disabled: isDisabled,
				type: 'text',
				placeholder: '请输入上台时间',
			},
			colProps: {
				md: 5,
			},
		},
		cTypeName4: {
			label: '来源',
			type: 'input',
			props: {
				disabled: isDisabled,
				type: 'text',
				placeholder: '请输入来源',
			},
			colProps: {
				md: 5,
			},
		},
		cTypeName5: {
			label: '记录人',
			type: 'input',
			props: {
				disabled: isDisabled,
				type: 'text',
				placeholder: '请输入记录人',
			},
			colProps: {
				md: 5,
			},
		}
	});

	// 炉次配置
	const lucTypeList = ref([{
		name: '炉次计划信息',
		type: 'plan'
	}, {
		name: '炉次出坯信息',
		type: 'ejection'
	}])
	const luciType = ref('plan') //炉次类型，plan计划信息、ejection 出坯信息
	function luciClick(item) {
		luciType.value = item.type
	}

	const polTableRef = ref(null); //表格ref
	//表格配置
	const columns = ref([
		{ label: '批次序号', key: 'ItemCode', align: 'center', width: '100' },
		{ label: '铸坯数量', key: 'ItemName', align: 'center', width: '120' },
		{ label: '铸坯类型', key: 'ItemValue', align: 'center', width: '120' },
		{ label: '铸坯去向', key: 'IsDefault', align: 'center', width: '120' },
		{ label: '计划断面', key: 'P_IsSys', align: 'center', width: '120' },
		{ label: '计划切割定尺', key: 'P_IsReadOnly', align: 'center', width: '150' },
		{ label: '切割定尺上限', key: 'gangbao', align: 'center', width: '150' },
		{ label: '切割定尺下限', key: 'kaishi', align: 'center', width: '150' },
	]);
	
	const cz = { label: '操作', key: 'caozhuo', align: 'center', width: '150px', slot: true }
	
	if(props.type !== 'page') {
		columns.value.push(cz)
	}
	
	//表格配置
	const tableOpt = ref({
		columns: columns.value,
		localData: [{
				ItemCode: '1',
				ItemName: '120',
				ItemValue: '混钢',
				IsDefault: '冷床',
				P_IsSys: '0.53*0.41',
				P_IsReadOnly: '13.2',
				gangbao: '20',
				kaishi: '10',
			},
			{
				ItemCode: '1',
				ItemName: '120',
				ItemValue: '混钢',
				IsDefault: '冷床',
				P_IsSys: '0.53*0.41',
				P_IsReadOnly: '13.2',
				gangbao: '20',
				kaishi: '10',
			},
			{
				ItemCode: '1',
				ItemName: '120',
				ItemValue: '混钢',
				IsDefault: '冷床',
				P_IsSys: '0.53*0.41',
				P_IsReadOnly: '13.2',
				gangbao: '20',
				kaishi: '10',
			},
			{
				ItemCode: '1',
				ItemName: '120',
				ItemValue: '混钢',
				IsDefault: '冷床',
				P_IsSys: '0.53*0.41',
				P_IsReadOnly: '13.2',
				gangbao: '20',
				kaishi: '10',
			},
			{
				ItemCode: '1',
				ItemName: '120',
				ItemValue: '混钢',
				IsDefault: '冷床',
				P_IsSys: '0.53*0.41',
				P_IsReadOnly: '13.2',
				gangbao: '20',
				kaishi: '10',
			},
			{
				ItemCode: '1',
				ItemName: '120',
				ItemValue: '混钢',
				IsDefault: '冷床',
				P_IsSys: '0.53*0.41',
				P_IsReadOnly: '13.2',
				gangbao: '20',
				kaishi: '10',
			},
		]
	});

	const dialogHeatScheduleEdit = ref(false) //新增编辑弹窗

	const dialogOpen = (data) => {
		dialogHeatScheduleEdit.value = data
	}

	// 输出组件的方法，让外部组件可以调用
	defineExpose({
		dialogOpen, //新增编辑弹窗
	});
</script>

<style lang="scss" scoped>
	.luci-box {
		padding: 10px 30px;
	}
</style>